<template>
  <div class="order-pay">
    <order-header title="支付订单">
      <span slot="desc">温馨提示： 请及时支付订单哦</span>
    </order-header>

    <div class="container">
      <!-- 订单提示标题 -->
      <div class="orderhead">
        <div class="icon"></div>
        <div class="title">
          <h2>订单提交成功！去付款喽~</h2>
          <div class="price">
            应付金额：<span>{{ order.totalMoney }}</span
            ><i>元</i>
          </div>
        </div>
        <div class="info">
          <p>
            请在 <span>{{showTime}}</span> 内完成支付, 超时后将取消订单<br />
            收货信息：{{ order.consignee.consigneeAddress }}
          </p>
        </div>
        <div class="order-arrow">
          订单详情
          <span
            class="arrow"
            :class="{ rotate: isOrderShow }"
            @click="orderSpread"
          ></span>
        </div>
      </div>
      <!-- 订单详情展开 -->
      <div class="orderdetail" v-show="isOrderShow">
        <div class="item">
          <span>订单号：</span>
          <span class="color">{{ order.id }}</span>
        </div>
        <div class="item">
          <span>收货信息：</span>
          <span>{{ order.consignee.address }}</span>
        </div>
        <div class="item">
          <span>发票信息：</span>
          <span>电子发票个人</span>
        </div>
      </div>
      <!-- 支付宝 微信付款方式 -->
      <div class="paymethod">
        <h3 class="choose">请选择以下支付方式付款</h3>
        <h3 class="payment">支付平台</h3>
        <div class="btn">
          <div
            class="alipay"
            :class="{ active: paytype == 1 }"
            @click="alipayClick"
          ></div>
          <div
            class="tencent"
            :class="{ active: paytype == 2 }"
            @click="wechatClick"
          ></div>
        </div>
      </div>
    </div>
    <we-chat-scan
      v-if="isScanShow"
      :imgURL="imgbase64URL"
      @closeClick="handleCloseClick"
    ></we-chat-scan>
    <model
      title="订单支付确认"
      btnType="2"
      :showModle="isModelShow"
      @sureClick="goOrderList"
      @closeClick="closeModel"
      sureText="查看订单"
      closeText="我再想想~"
    >
      <template v-slot:content>
        <p>请确认您是否完成支付？</p>
      </template>
    </model>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import QRCode from "qrcode";
import OrderHeader from "components/orderheader/OrderHeader";
import WeChatScan from "components/wechatscan/WeChatScan";
import Model from "components/model/Model";
export default {
  name: "orderPay",
  components: {
    OrderHeader,
    WeChatScan,
    Model,
  },
  data() {
    return {
      orderId: "", //订单id
      order: {},
      orderPayment: 0, //应付金额
      paytype: 0, //1 代表支付宝 2代表微信支付
      isOrderShow: false, //是否展示订单详情
      isScanShow: false, //是否展示微信支付弹框
      imgbase64URL: "", //qrcode插件生成的base64图片地址字符串
      isModelShow: false, //是否显示二次支付模态框
      timer: "", //订单状态轮询定时器id
      downTime: 0
    };
  },
  computed: {
    ...mapState(['user']),
    endTime () {
      return Date.now() + 1800000
    },
    showTime () {
      let min = Math.floor(this.downTime / 60)
      let sec = this.downTime % 60
      return `${min}分钟${sec < 10 ? '0' + sec : sec}秒`
    }
  },
  methods: {
    /**
     * 倒计时 30分钟
     */
    timeOut () {
      this.downTime = Math.floor(this.endTime - Date.now()) / 1000
      this.timer = setInterval(() => {
        this.downTime--
        if (this.downTime < 1) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 获取订单详情
    getOrderDetail() {
      let query = {
        orderId: this.orderId
      }
      this.$api.cart.getOrderDetail(query).then(res => {
        if (res.code === 200) {
          this.order = res.data
          this.timeOut()
        }
      })
    },
    // 展开详情 隐藏详情
    orderSpread() {
      this.isOrderShow = !this.isOrderShow;
    },
    // 选择支付宝支付
    alipayClick() {
      // 样式发生改变
      this.paytype = 1;
      let params = {
        id: this.orderId
      }
      this.$api.cart.finishOrder(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '支付成功！'
          })
          this.$router.replace({
            path: '/sale'
          })
        }
      })
      // 跳转至新窗口中打开
      // window.open("/order/alipay?orderId=" + this.orderId, "_blank");
    },
    // 选择微信支付
    wechatClick() {
      this.paytype = 2;
      let params = {
        id: this.orderId
      }
      this.$api.cart.finishOrder(params).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '支付成功！'
          })
          this.$router.replace({
            path: '/sale'
          })
        }
      })
      // 无需跳转至新窗口中，直接发送支付请求
      // request({
      //   method: "post",
      //   url: "/pay",
      //   data: {
      //     orderId: this.orderId,
      //     orderName: "克林辣舞的微信支付测试订单", //扫码支付时订单名称
      //     amount: 0.01, //单位元
      //     payType: 2, //1支付宝，2微信
      //   },
      // }).then((res) => {
      //   console.log(res);
      //   // 调用插件qrCode的方法将服务器返回的字符串转化为base64位的字符串图片地址
      //   QRCode.toDataURL(res.content)
      //     .then((url) => {
      //       console.log(url);
      //       this.imgbase64URL = url; //保存生成的bae64位图片url字符串地址
      //       this.isScanShow = true; //显示微信支付二维码
      //       this.loopOrderState(); //开始支付状态轮询确定用户是否完成支付
      //     })
      //     .catch(() => {
      //       this.$message.error("微信二维码生成失败，请稍后重试");
      //     });
      // });
    },
    // 关闭微信支付弹窗
    handleCloseClick() {
      // 将带有二维码弹窗关闭
      this.isScanShow = false;
      // 显示二次支付确认模态框
      this.isModelShow = true;
      // 清除定时器
      clearInterval(this.timer);
    },
    // 订单状态轮询定时器
    loopOrderState() {
      // this.timer = setInterval(() => {
      //   // 每隔1s向服务器发送一次请求查询订单是否支付完成
      //   request({
      //     method: "get",
      //     url: `/orders/${this.orderId}`,
      //   }).then((res) => {
      //     // console.log(res);
      //     if (res.status == 20) {
      //       // 清除定时器
      //       clearInterval(this.timer);
      //       //跳转至订单列表
      //       this.$router.push("/order/list");
      //     }
      //   });
      // }, 1000);
    },
    // 点击查看订单按钮
    goOrderList() {
      this.$router.push("/order/list");
    },
    // 点击我再想想按钮
    closeModel() {
      this.isModelShow = false;
    },
  },
  mounted() {
    // 获取地址栏中的订单编号并保存至data中
    this.orderId = this.$route.query.orderId;
    // 根据订单编号获取订单详情
    this.getOrderDetail();
  },
};
</script>
<style scoped>
.active {
  border: 1px solid #ff6600 !important;
}
.rotate {
  transform: rotate(180deg);
}
.order-pay {
  background-color: #f5f5f5;
}
.container {
  padding-bottom: 100px;
}
/* 订单头部 */
.orderhead {
  box-sizing: border-box;
  height: 206px;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding: 60px 51px 53px 185px;
  position: relative;
  margin-top: 20px;
}
.icon {
  width: 90px;
  height: 90px;
  background: url("/imgs/icon-gou.png") no-repeat center;
  background-size: 48px;
  background-color: #7ec688;
  border-radius: 50%;
  position: absolute;
  left: 53px;
  top: 62px;
}
.title {
  display: flex;
  justify-content: space-between;
}
.title span {
  font-size: 20px;
  color: #ff6600;
}
.title i {
  font-size: 12px;
  color: #ff6600;
}
.info {
  margin-top: 30px;
  line-height: 20px;
}
.info span {
  color: #ff6600;
}
.order-arrow {
  position: absolute;
  right: 70px;
  top: 125px;
}
.order-arrow .arrow {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ff6600;
  top: 1px;
  right: -18px;
  background: url("/imgs/icon-down.png") no-repeat center;
  background-size: contain;
  transition: all 0.5s;
  cursor: pointer;
}
/* 订单详情 */
.orderdetail {
  box-sizing: border-box;
  height: auto;
  background-color: #fff;
  padding: 49px 0 50px 185px;
}
.item {
  display: flex;
  margin-top: 15px;
  font-size: 14px;
}
.item span:first-child {
  width: 100px;
}
.color {
  color: #ff6600;
}
.orderlist {
  display: flex;
  flex-direction: column;
}
.orderlist div:first-child {
  margin-top: 0;
}
.orderlist div {
  margin-top: 8px;
  white-space: nowrap;
}
/* 订单支付方式 */
.paymethod {
  margin-top: 30px;
  height: 270px;
  padding: 0 54px;
  background-color: #fff;
}
.choose {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.payment {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
}
.btn {
  display: flex;
}
.alipay,
.tencent {
  width: 188px;
  height: 64px;
  margin-right: 18px;
  cursor: pointer;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.alipay {
  background: url("/imgs/pay/icon-ali.png") no-repeat center;
  background-size: 103px;
  background-color: #fff;
}
.tencent {
  background: url("/imgs/pay/icon-wechat.png") no-repeat center;
  background-size: 103px;
  background-color: #fff;
}
</style>
